<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- validate -->
<link href="light/css/jquery.validate.css" rel="stylesheet">
<!-- alert -->
<link rel="stylesheet" href="light/css/jquery.growl.css">
<style>
body{
	font-family:"Arial","微軟正黑體";
}

.riddle_container1{
			margin: 20% 10% 0 15%;
		}
		.riddle_container2{
			margin: 20% 15% 0 25%; 
		}
		.riddle_chg{
			margin-top: 20%;
		}
		.riddle_spanchg{
			color: black;
			float: right;
		}
		.riddle_text{
			padding:5%;
			width: 95%;
			height: 10%;
			border:0px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
		}
		.specialriddlecard{
			width: 580px;
			height: 330px;
			position: relative;
			background: url(light/img/rss_bg.PNG) no-repeat ;
			opacity: 0.9;
			background-size: 100%;
			/*border-radius: 5%;*/
			box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);
			color: black;
		}
		.specialriddlecard1{
			width: 50%;
			height: 100%;
			float: left;
			border-radius: 5% 0 0 5%;
			/*background: linear-gradient(#000005, #050520); */
		}
		.specialriddlecard2{
			width: 50%;
			height: 100%;
			float: left;
			border-radius: 0 5% 5% 0;
			/*background: linear-gradient(#000005, #050520); */
		}
		.specialriddle_btn{
			margin:20% 0 0 55%;
			border: 2px solid #FFFFFF;
			display: inline-block;
		   	text-decoration:none;
			font-size: 18px;
			padding: 5% 10%;
			color: #FFFFFF;
			cursor: pointer;
			font-weight: bold;
			background:  #262626;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
			-o-border-radius: 5px;
			border-radius: 5px;
			-webkit-transition: background-color 0.5s;
			-moz-transition: background-color 0.5s;
			-o-transition: background-color 0.5s;
			transition: background-color 0.5s;
		}
		.specialriddle_btn:hover{
			background:#696969;
			color:#FFFFFF;
			font-weight: bold;
		}	
		.ele img{
			width: 500px;
			height: 500px;
			text-align: center;
			margin-left: 47px;
			margin-top: 10px;
		}

</style>
</head>
<body>
<form id="sendForm" action="checkAnswer" method="post">
	<div class="container" id="content">
		<div class="grid_6 specialriddlecard">
			<div class="specialriddlecard1">
				<div class="riddle_container1">
					<h2>
						<span>燈謎</span>
					</h2>
					<h3 class="riddle_chg">example_question</h3>
				</div>
			</div>
			<div class="specialriddlecard2">
				<div class="riddle_container2">
					<h2>
						<span class="riddle_spanchg"><label for="riddleAns">謎底</label></span>
					</h2>
					<input type="text" class="riddle_chg riddle_text" id="riddleAns" name="riddleAns"
						placeholder="請輸入答案" value="">
					<button class="specialriddle_btn">確認</button>
				</div>
			</div>
		</div>
	</div>
	<div id="view"></div>
</form>
<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<!-- bpopup -->
	<script src="light/js/jquery.bpopup.min.js"></script>
	<!-- alert  -->
	<script src="light/js/jquery.growl.js" type="text/javascript"></script>
	<!-- validate -->
	<script src="js/jquery.validate.js"></script>
	<script src="js/messages_zh_TW.js"></script>
	<script>
	$(function(){
		var id=location.search.trim().split("=")[1];
		$("#sendForm").validate({
			rules:{
				riddleAns:"required"
			},
			submitHandler:function(){
				$.ajax({
					type:"post",
					url:"checkAnswer",
					data:{
						id:id,
						riddleAns:$('#riddleAns').val()
					},
					success:function(flag){
						if(flag==true){
							location.replace("http://localhost:8080/Proactive/lightHtml?id="+id);
						}
						else
							$.growl.error({ message: "答錯囉~快去問你的寄件人吧!" });
					}			
				});
			}
		});
		$.ajax({
			type:"post",
			url:"checkWho",
			data:{
				id:id
			},
			success:function(flag){
				if(flag==true){
					$('#riddleAns').val("example_answer");
				}
			}			
		});
	});
		
	</script>
</body>
</html>